<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid test</title>
</head>
<body>
    <section>
        <style>
            .container{
                display:grid;
                grid-template-columns: 50px 60px 60px;
                grid-template-rows: 100px 200px 100px;
                width: 400px;
                height: 600px;
                border: 1px solid red;
                /*grid-template-areas: "header header header"*/
                /*              "main main sidebar"*/
                /*         "footer footer footer";*/
                /*justify-items: center;*/
                /*align-items: center;*/
                justify-content: center;
                align-content: center;

            }
            .container>div{
                border: 1px solid black;
            }
            .item-a{
                /*grid-area: header;*/
                grid-column: 1 / 4;
                grid-row: 1 / 2;
                background-color: #2e8cd5;
                display: block;
                justify-self:center;
                align-self: center;
            }
            .main{
                grid-column: 1 / 3;
                grid-row: 2 / 3;
                /*grid-area: main;*/
                background-color: #6cac2a;
            }
            .sidebar{
                /*grid-area: sidebar;*/
                grid-column: 3 / 4;
                grid-row: 2 / 3;
                background-color: #9815b1;
            }
            .footer{
                /*grid-area: footer;*/
                grid-column: 1 / 4;
                grid-row: 3 / 4;
                background-color: #0ac43f;
            }
        </style>
        <div class="container">
            <div class="item-a">
                <p>header</p>
            </div>
            <div class="main">main</div>
            <div class="sidebar">sidebar</div>
            <div class="footer">footer</div>
        </div>
    </section>
</body>
</html>
